import React, { useMemo } from 'react';
import { useNavigate } from 'react-router-dom'
import { Card, Ellipsis, Swiper } from 'antd-mobile'
import { data, IItem, IData, IIRecommend } from '../../../utils/mock'
import { isDarck } from '../../../utils/isDarck'
import "./index.less";


interface ICity {
    current: IItem
}
interface IRecommend {
    current: IIRecommend
}

const City: React.FC<ICity> = ({current}) => {
    const navigate = useNavigate()
    return (
        <Card
            onClick={()=>navigate(`/home/city?cityName=${current.title}`)}
        >
            <div className='m-hot-city-nav-card'>
                <div className='nav-card-img'><img alt="example" src={current.url} /></div>
                <div className='nav-card-content'>
                    <div className='nav-card-content-title'>{current.title}</div>
                    <Ellipsis direction='end' rows={2} content={current.desc as string}/>
                </div>
            </div>
        </Card>
    )
}

const Recommend: React.FC<IRecommend> = ({current}) => {
    const navigate = useNavigate()
    return (
        <Card
            onClick={()=>navigate(`/home/city?cityName=${current.title}`)}
            style={{display:'flex', padding: '12px', boxSizing: 'border-box', marginBottom: '16px'}}
            bodyStyle={{flex:1, padding: 0}}
            key={`recommend${current.id}`}
        >   
            <div className='m-city-recommend-nav-card'>
                <div className='nav-card-img'><img  alt="example" src={current.url} /></div>
                <div className='nav-card-content'>
                    <div className='nav-card-content-title'>{current.title}</div>
                    <Ellipsis
                        direction='end'
                        expandText='查看'
                        collapseText='收起'
                        rows={3}
                        content={current.desc}
                    />
                </div>
            </div>
        </Card>
    )
}


const Home: React.FC = () => {
    const { head,  content: { hot, recommend } } = data as IData
    const headUrl: string = useMemo(() => {
        const lightUrl = head.mainPic && head.mainPic.length && head.mainPic[0].url ? head.mainPic[0].url : ''
        const darkUrl = head.darkPic && head.darkPic.length && head.darkPic[0].url ? head.darkPic[0].url : ''

        return isDarck()? darkUrl : lightUrl
    }, [head.mainPic, head.darkPic])

    const hotList = useMemo(()=>{
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const sortedArray = hot.list.slice().sort((_a, _b) => 0.5 - Math.random());  
        return sortedArray.slice(0, 3);
    },[hot.list])
    
    const recommendList = useMemo(()=>{
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const sortedArray = recommend.list.slice().sort((_a, _b) => 0.5 - Math.random());  
        return sortedArray.slice(0, 6);
    },[recommend.list])


    return (
        <div className='m-home-wrapper'> 
            <div className='m-home-nav'>
                <div className='m-banner'>
                    <img src={headUrl} alt="travel pic" />
                    <span> {head.title} </span>
                </div>
                <div className='m-hot-city'>
                    <div className='m-hot-city-title'>{hot.title}</div>
                    <Swiper 
                        className='m-hot-city-nav'
                        slideSize={55} 
                        trackOffset={15} 
                        stuckAtBoundary={false}
                        indicator={() => null}
                        loop 
                    >
                        {
                            hotList.map((item)=>(<Swiper.Item key={`city${item.id}`}>
                                <City current={item} key={`hot${item.id}`} /> </Swiper.Item>))
                        }
                    </Swiper>
                </div>
                <div className='m-city-recommend'>
                <div className='m-city-recommend-title'>{recommend.title}</div>
                    <div className='m-city-recommend-nav'>
                        {
                            recommendList.map((item)=>
                            (<Recommend current={item} key={`recommend${item.id}`} />))
                        }
                    </div>
                </div>
                <div className='m-footer'>
                    Open-source MIT Licensed | 豫ICP备2023006723号-2 | Copyright © 2017-present
                </div>
            </div>
        </div>
    )
}

export default Home